<!-- 动态 -->
<template>
  <div class="photo-item">
    <div class="photo-item-main" v-if="props.photoList">
      <van-image
        v-if="props.photoList.length == 1"
        @click="viewItem(props.photoList, 1)"
        class="image-box1"
        fit="cover"
        position="center"
        radius="8"
        :src="props.photoList[0]"
      />
      <van-grid v-else square :border="false" :gutter="0" :column-num="3">
        <van-grid-item
          @click="viewItem(props.photoList, 2, index)"
          v-for="(value, index) in props.photoList"
          :key="value"
          icon="photo-o"
          text="文字"
        >
          <van-image radius="8" fit="cover" position="center" :src="value"
        /></van-grid-item>
      </van-grid>
    </div>
  </div>
  <van-image-preview
    v-model:show="showValue"
    :images="images"
    :close-on-click-image="false"
    :startPosition="ImageIndex"
    teleport="body"
    closeable
    doubleScale
  >
    <template #image="{ src, style, onLoad }">
      <van-image
        v-if="!(src.indexOf('.map4') > 0)"
        :style="[{ width: '100%' }, style]"
        fit="cover"
        position="center"
        :src="src"
        @load="onLoad"
      />

      <video v-else style="width: 100%" controls>
        <source :src="src" />
      </video>
    </template>
  </van-image-preview>
</template>
  <script setup>
import { reactive, ref, toRefs } from "vue";

import { useRoute, useRouter } from "vue-router";

import { showImagePreview } from "vant";

const props = defineProps({
  isHead: {
    type: Boolean,
    default: true,
  },
  photoList: {
    type: Array,
    default: () => [],
  },
});
const route = useRoute();

const state = reactive({});

const { tabsList, labelsColor } = toRefs(state);
const router = useRouter();

const avaterClick = () => {
  router.push({
    name: "photoDetail",
  });
};

// 预览
let showValue = ref(false);
let images = ref([]);
let ImageIndex = ref(0);
const viewItem = (ls, type, index) => {
  let list = [];
  if (type == 1) {
    list.push(ls);
  }
  if (type == 2) {
    list = ls;
  }
  images.value = list;
  ImageIndex.value = index ? index : 0;
  showValue.value = true;
};
</script>
  
  
  
  <style lang="scss" scoped>
.photo-item {
  border-radius: 15px 15px 0 0;
  background: #fff;
  margin-top: 10px;
}
.photo-item-head {
  display: flex;
  align-items: center;
  .van-image {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    border-radius: 32px;
    overflow: hidden;
  }
  .photo-item-name {
    h4 {
      font-size: 14px;
      font-weight: normal;
    }
    .labels {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #999;
    }
  }
}
:deep(.van-grid-item__content) {
  width: 100%;
  padding: 0 !important;
  .van-image {
    height: 100%;
    width: 98%;
  }
}
.photo-item-main {
  margin-top: 10px;
}
.photo-item-content {
  padding-left: 45px;
  margin-top: 5px;
  font-size: 14px;
  color: #999;
}
.photo-item-content-timer {
  color: #999;
  font-size: 14px;
}
.image-box1 {
  width: 50%;
  height: 30vh;
  border-radius: 8px;
}
</style>
  